import React from 'react'
import './Classification.css'
import { message } from 'antd';
import $ from 'jquery'
import { setStorage } from '../../utils/utils';

class Classification extends React.Component {
    constructor() {
        super()
        this.state = {
            typeData1: ['出版', '男频', '女频'],
            typeData2: ['小说', '文学', '历史', '传记', '青春', '励志', '心理', '社科', '文化', '科普', '医学', '外语', '军事', '修养', 
                '哲学', '法律', '休闲', '外文', '国学经典', '政治'],
            typeData3: ['全部', '免费', '特价', 'VIP'],
            index: [0, 0, 0],
            bookType: { bookChannel: '出版', bookType: '小说', bookPriceType: '全部', bookClass: '热门' },
            booksData: [],
            chooseClassNum: 0,
            publishedTypeData: ['小说', '文学', '历史', '传记', '青春', '励志', '心理', '社科', '文化', '科普', '医学', '外语', '军事', '修养', 
            '哲学', '法律', '休闲', '外文', '国学经典', '政治'],
            boyTypeData: ['玄幻', '都市', '武侠', '仙侠', '奇幻', '校园', '历史', '军事', '游戏', '竞技', '科幻'],
            girlTypeData: ['现代言情', '古代言情', '幻想言情', '青春校园', '同人作品', '推理悬疑', '惊悚/恐怖', '次元专区'],

            start: 0,
            nowPage: 1,
            pageSize: 15,
        }
    }

    componentDidMount() {
        let obj = this.props.history.location.state
        if (obj) {
            let newBookType = JSON.parse(JSON.stringify(this.state.bookType))
            let newIndex = JSON.parse(JSON.stringify(this.state.index))
            let newType, newData
            if (obj.index === 1) {
                newData = this.state.boyTypeData
                newType = this.state.boyTypeData[obj.num]
            }
            if (obj.index === 2) {
                newData = this.state.girlTypeData
                newType = this.state.girlTypeData[obj.num]
            } else {
                newData = this.state.publishedTypeData
                newType = this.state.publishedTypeData[obj.num]
            }
            newIndex[0] = obj.index
            newIndex[1] = obj.num
            newBookType.bookChannel = this.state.typeData1[obj.index]
            newBookType.bookType = newType
            this.setState({
                index: newIndex,
                bookType: newBookType,
                typeData2: newData,
            }, function () { this.getBookData() })
        } else {
            this.getBookData()
        }
    }

    // 得到类型、频道、其他的列表
    getTypeFun = (List, num) => {
        return List.map((item, index) => {
            return (
                <li className={this.state.index[num] === index ? 'choosedType' : ''} onClick={() => this.chooseType(num, index, item)} key={index}>{item}</li>
            )
        })
    }

    // 当更改书籍类型是请求不同的数据
    chooseType = (num, index, item) => {
        let newIndex = JSON.parse(JSON.stringify(this.state.index))
        let newbookType = JSON.parse(JSON.stringify(this.state.bookType))
        let newData
        newIndex[num] = index
        if (num === 0) {
            newIndex[1] = 0
            newIndex[2] = 0
            if (item === '男频') {
                newData = this.state.boyTypeData
                newbookType.bookType = '玄幻'
                $('.bookTypes>.right>ul').css({
                    "height": '32.4px'
                })
            } else if (item === '女频') {
                newData = this.state.girlTypeData
                newbookType.bookType = '现代言情'
                $('.bookTypes>.right>ul').css({
                    "height": '32.4px'
                })
            } else {
                newData = this.state.publishedTypeData
                newbookType.bookType = '小说'
            }
            this.setState({
                typeData2: newData,
                bookType: '热门',
                chooseClassNum: 0,
            })
            newbookType.bookChannel = item
            newbookType.bookPriceType = '全部'
            newbookType.bookClass = '热门'
        } else if (num === 1) {
            newbookType.bookType = item
        } else if (num === 2) {
            newbookType.bookPriceType = item
        }
        this.setState({
            index: newIndex,
            bookType: newbookType,
            nowPage: 1,
        }, function () { this.getBookData() })
    }

    // 当频道更改时重置类型和其他
    resetbooktype = () => {

    }


    // 更改书籍是热门、最新、好评是请求数据
    chooseClass = (item, num) => {
        let newbookType = JSON.parse(JSON.stringify(this.state.bookType))
        newbookType.bookClass = item
        this.setState({
            bookType: newbookType,
            chooseClassNum: num,
        }, function () { this.getBookData() })
    }

    // 当类型过多时通过展开来显示隐藏多的标签
    unfoldMore = () => {
        console.log(456465)
        if ($('.bookTypes>.right>ul').height() < 66) {
            $('.bookTypes>.right>ul').css({
                "height": '66px'
            })
            $('.bookTypes>.right>div>p').text('收起')
            $('.bookTypes>.right>div>span').css({
                "transform": 'rotate(180deg)'
            })
        } else {
            $('.bookTypes>.right>ul').css({
                "height": '32.4px'
            })
            $('.bookTypes>.right>div>p').text('更多')
            $('.bookTypes>.right>div>span').css({
                "transform": 'rotate(0deg)'
            })
        }

    }

    // 请求后台书籍的数据
    getBookData = () => {
        this.axios({
            url: '/index/getClassificationBooks',
            method: 'post',
            data: this.state.bookType
        }).then(data => {
            console.log(data.data.data)
            this.setState({
                booksData: data.data.data
            })
        })
    }

    // 通过数据获取书籍显示的div
    getBooksDiv = (List) => {
        const different = (item) => {
            if (item.bookClass === '热门') {
                return (
                    <p className='readNum'><span className='iconfont icon-ai-eye'></span>{item.readNum}</p>
                )
            } else if (item.bookClass === '最新') {
                return (
                    <p className='readNum'>{item.shelvesTime} 上架</p>
                )
            } else if (item.bookClass === '好评') {
                return (
                    <p className='readNum'>评分：{item.bookScore} 分</p>
                )
            }
        }
        if (List) {
            let newList = List.slice((this.state.nowPage - 1) * this.state.pageSize, (this.state.nowPage * this.state.pageSize))
            console.log(newList)
            return newList.map((item, index) => {
                return (
                    <div className='showBookDiv' key={index}>
                        <img alt='' src={'http://localhost:8888' + item.bookImg} onClick={() => this.gotoDetails(item)}></img>
                        <div className='rightBook'>
                            <div className='bookTitle' onClick={() => this.gotoDetails(item)}>{item.bookName}</div>
                            <div className='bookContext'>
                                <div>
                                    <p className='authorName'>{item.authorName}</p>
                                    <p className='tryingRead' onClick={() => this.gotoReadBook(item)}>试读</p>
                                </div>
                                {different(item)}
                                <p>{item.bookIntroduce}</p>
                            </div>
                        </div>
                    </div>
                )
            })
        }
    }

    // 点击书籍跳转到书籍详情模块
    gotoDetails(item) {
        console.log(item)
        this.props.history.push({
            pathname: '/TotalEntry/BookDetails',
            state: { id: item.id }
        })
    }

    gotoReadBook(item) {
        setStorage('bookId',item.id)
        this.props.history.push({
            pathname: "/ReadBook",
            state: { bookInformation: item },
        })
    }

    // 切换当前页
    changePage(num) {
        let newPage = this.state.nowPage
        let maxPage = Math.ceil(this.state.booksData.length / this.state.pageSize)
        newPage = newPage + num
        if (newPage < 1) {
            this.errorPrompt('已经是第一页了')
        } else if (newPage > maxPage) {
            this.errorPrompt('已经是最后一页了')
        } else {
            this.setState({
                nowPage: newPage,
            })
        }

    }

    errorPrompt = (val) => {
        message.error(val);
    };


    render() {
        return (
            <div>
                <div className='selectClass'>
                    <div>
                        <span>频道</span>
                        <div className='right'>
                            <ul>
                                {this.getTypeFun(this.state.typeData1, 0)}
                            </ul>
                        </div>
                    </div>
                    <div className='bookTypes'>
                        <span>类型</span>
                        <div className='right'>
                            <ul>
                                {this.getTypeFun(this.state.typeData2, 1)}
                            </ul>
                            {this.state.bookType.bookChannel === '出版' ? (<div onClick={() => this.unfoldMore()}><p>更多</p><span className='iconfont icon-down-copy-copy'></span></div>)
                                : (<div></div>)
                            }

                        </div>
                    </div>
                    <div>
                        <span>其他</span>
                        <div className='right'>
                            <ul>
                                {this.getTypeFun(this.state.typeData3, 2)}
                            </ul>
                        </div>
                    </div>
                </div>
                <div className='showClassBook'>
                    <div className='topShow'>
                        <ul>
                            <li className={this.state.chooseClassNum === 0 ? 'chooseLi' : 'noChooseLi'} onClick={() => this.chooseClass('热门', 0)}>热门</li>
                            <li className={this.state.chooseClassNum === 1 ? 'chooseLi' : 'noChooseLi'} onClick={() => this.chooseClass('最新', 1)}>最新</li>
                            <li className={this.state.chooseClassNum === 2 ? 'chooseLi' : 'noChooseLi'} onClick={() => this.chooseClass('好评', 2)}>好评</li>
                        </ul>
                        <div className='topPaging'>
                            <div className='topPageBtn' onClick={() => this.changePage(-1)}>
                                <span className='iconfont icon-shangxiazuoyouTriangle14'></span>
                            </div>
                            <p>第{this.state.nowPage}页</p>
                            <div className='topPageBtn' onClick={() => this.changePage(1)}>
                                <span className='iconfont icon-shangxiazuoyouTriangle12'></span>
                            </div>
                        </div>
                    </div>
                    <div className='middleShow'>
                        {this.getBooksDiv(this.state.booksData)}
                    </div>
                </div>
            </div>
        )
    }
}
export default Classification
// export default Classification



